<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%
	String myContext = request.getContextPath();
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="./css/Design.css" rel="stylesheet" type="text/css">
<title>회원 가입</title>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="./jquery/jquery.js"></script>
<script type="text/javascript" src="./jquery/jquery.validate.js"></script>
<script type="text/javascript">
		 $(document).ready(function() { 
			 $('#idcheck').click(function(){
					var id = $.trim($("#mid").val());
					var mpassword = $.trim($("#mpassword").val());;
					if(id == ""){
						alert('아이디를 우선 입력하세요.');
						$("#mid").val("");
						$("#mid").focus();
						return ;
					}else if( id.length <= 3 ){
						alert('아이디는 4자리 이상입니다.');
						$("#mid").focus();
						return ;
					}else{
						$.ajax({
							type: "POST",
							url: "idcheck.member",
							data: {
								"mid":id,
								"mpassword":mpassword
							},
							//timeout:1000, 1000은 1초					
							//dataType: "html",
							contentType : "application/x-www-form-urlencoded; charset=UTF-8", //utf-8로 전송
							beforeSend:function(){
								//alert('beforeSend') ;
								//$("#default div.results").html("처리 중..");
							},
							success: function(data){
								//alert( data ) ;
								$("#idresult").html(data);
							},
							error: function(request,status,error){
								alert("code : " + request.status + "\n" + "error : " + error );
							}
						});
					}
				});
  			$('#myform').validate({
   				rules: {
   					mid: {
        				required: true,
        				rangelength:[4,8]				        
     				},
     				mpassword: {
        				required: true,
        				rangelength:[4,10]
     				},
     				repassword: {equalTo:'#mpassword'},     				
     				mname: {
        				required: true
     				},     				
     				mrrn1: {
        				required: true,
        				rangelength:[6, 6]				        
     				},     				
     				mrrn2: {
        				required: true,
        				rangelength:[7, 7]				        
     				}
   				}, //end rules
   				messages: {
   					mid: {
        				required: " 아이디는 필수 입력 사항입니다.",
        				rangelength: ' 아이디는 4자리 이상 8자리 이하입니다.'
     				},
      				mpassword: {
        				required: ' 비밀 번호를 입력해 주세요.',
        				rangelength: ' 비밀 번호는 4자리 이상 10자리 이하입니다.'
     				},
       				repassword: {
        				equalTo: ' 비밀 번호가 일치하지 않습니다.'
      				},
     				mname: {
        				required: " 이름을 입력해 주세요."
     				},     				
       				mssn1: {
        				required: " 주민 번호 앞 자리 누락",
        				rangelength: " 반드시 6자리로 넣어 주세요"				        
     				},     				
     				mssn2: {
     					required: " 주민 번호 뒷 자리 누락",
        				rangelength: " 반드시 7자리로 넣어 주세요"			        
     				}
   				},
   				errorPlacement: function(error, element) { 
       				if ( element.is(":radio") || element.is(":checkbox")) {
          				error.appendTo( element.parent()); 
      				} else if (element.attr("mname") == "mname"){
      					error.insertAction($('#smname'));
      				}else{
          				error.insertAfter(element);
        			} 
    			} 
			});// end validate 
			// 메일 리스트박스 사용시 체크박스 값 복사
			/* $('#choice').bind('change',function(){
				var value = document.myform.choice.value;			
				document.myform.mailchoice.value = value;			
			}); */
		}); // end ready()
	</script>
<script type="text/javascript">
	function ZipCheck(){
		var url = "ZipCheck.member";
		window.open(url,"title","toolbar=no ,width=500 ,height=300 ,directories=no,status=yes,scrollbars=yes,menubar=no");
	}
	function home(){
		location.href="<%=myContext%>/startHome.main";
	}
	function chan(vala) {
		var value = vala.options.selectedIndex;
		var txt = vala.options[value].text;
		document.myform.mailchoice.value = txt;
	}
</script>
</head>
<body>
	<td colspan="5">
		<form name="myform" id="myform" method="post"
			action="<%=myContext%>/insert.member">
			<div id="itemlistformembers1">

				<table class="tblcss" border="1" align="center">

					<tr>
						<th colspan="2" align="center">회원 가입</th>
					</tr>


					<tr>
						<th>회원 아이디</th>
						<td>
							<input type="text" name="mid" id="mid">
							<input class="button" type="button" value="ID check" id="idcheck">
							<span id="idresult"></span>
						</td>
					</tr>

					<tr>
						<th>비밀 번호</th>
						<td><input type="password" name="mpassword" id="mpassword"><br></td>
					</tr>
					<tr>
						<th>비밀 번호 확인</th>
						<td><input type="password" name="repassword" id="repassword"><br>
					</tr>

					<tr>
						<th colspan="2" align="center"><b>개인 신상 정보 </b></th>
					</tr>


					<tr>
						<th>이름</th>
						<td><input type="text" name="mname"></td>


					</tr>
					<tr>
						<th>주민 등록 번호</th>
						<td><input type="text" name="mssn1" maxlength="6" size="6">
							- <input type="text" name="mssn2" maxlength="7" size="7"></td>
					</tr>

					<tr>
						<th>휴대 전화 번호</th>
						<td><select name="mphone1">
								<option value="010">010</option>
								<option value="011">011</option>
						</select> <input type="text" name="mphone2" size="4" maxlength="4">
							- <input type="text" name="mphone3" size="4" maxlength="4"></td>
					</tr>
					<tr>
						<th>E-mail</th>
						<td><input type="text" name="email" size="12"> @ 
						<input type="text" name="mailchoice" size="10">
						<select id="choice" onchange="chan(this);">
								<option value="" selected="selected">직접 입력</option>
								<option value="naver.com">naver.com</option>
								<option value="hanmail.net">hanmail.net</option>
								<option value="daum.net">daum.net</option>
								<option value="gmail.com">gmail.com</option>
						</select>
						</td>
					</tr>

					<tr>
						<th>우편 번호</th>
						<td>
							<input type="text" name="mzipcode" size="10">
							<input class="button" type="button" value="search" onClick="ZipCheck()">
						</td>
					</tr>

					<tr>
						<th>주소</th>
						<td>
							<input type="text" name="maddress" id="maddress" size="60">
						</td>

					</tr>

					<tr>
						<td colspan="2">
							<center>
								<input class="button" type="submit" value="ok" onClick="return checkForm();">&nbsp;&nbsp;
								<input class="button" type="button" value="cancle" onclick="home()">
							</center>
						</td>
					</tr>

					</tbody>
				</table>
			</div>
		</form>
	</td>
</body>
</html>